<template>

    <div>

        <!--        导航栏-->
        <div class="nav">
            <div class="nav-content">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <router-link to="/">
                            <img class="logo"
                                 src="../assets/logo.jpg"
                                 alt="Lin">
                        </router-link>
                    </el-col>
                    <el-col :span="16">
                        <el-menu :router="true"

                                 active-text-color="#409eff"
                                 class="el-menu-demo"
                                 mode="horizontal"
                                 @select="handleSelect">
                            <el-menuItem :route="l.path"
                                         :index="l.index"
                                         v-for="l in list"
                                         :key="l.index">
                                {{l.name}}
                            </el-menuItem>
                            <el-menu-item>
                                <el-input
                                        placeholder="搜索文章"
                                        v-model="keyword" @keyup.enter.native="onEnterSearch">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                </el-input>
                            </el-menu-item>
                        </el-menu>
                    </el-col>

                    <el-col v-if="user==null"
                            :span="4">
                        <div class="nav-right">
                            <el-button size="small"
                                       type="primary"
                                       @click="openLoginDialog()"
                            >登录
                            </el-button>
                            <el-button size="small"
                                       type="danger"
                                       @click="openRegisterDialog()"
                            >注册
                            </el-button>
                        </div>
                    </el-col>

                    <el-col v-if="user!=null"
                            :span="4">
                        <div class="nav-right">
                            <el-dropdown class="avatar-container" trigger="click">
                                <div class="avatar-wrapper">
                                    <img :src="user.headImage" class="user-avatar">
                                    <i class="el-icon-caret-bottom" />
                                </div>
                                <el-dropdown-menu slot="dropdown" class="user-dropdown">
                                    <el-dropdown-item divided>
                                        <span style="display:block;">{{user.username}}</span>
                                    </el-dropdown-item>
                                        <el-dropdown-item divided>
                                            <span style="display:block;" @click="toBackstage">后台</span>
                                        </el-dropdown-item>
                                    <el-dropdown-item divided>
                                        <span style="display:block; color: #F56C6C" @click="logoutAction">登出</span>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div class="login">

            <el-dialog
                    title="登录表单"
                    :visible.sync="loginDialogVisible"
                    width="30%"
                    :close-on-click-modal="false"
                    center>
                <el-form ref="form" :model="loginForm" label-width="80px" >
                    <el-form-item label="账号">
                        <el-input type="text" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="loginForm.password"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="loginDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="loginAction()">登 录</el-button>
              </span>
            </el-dialog>


        </div>

        <div class="register">

            <el-dialog
                    title="注册表单"
                    :visible.sync="registerDialogVisible"
                    width="30%"
                    :close-on-click-modal="false"
                    center>
                <el-form ref="form" :model="registerForm" label-width="80px" >
                    <el-form-item label="账号">
                        <el-input type="text" v-model="registerForm.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="registerForm.password"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input type="text" v-model="registerForm.nickname"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名">
                        <el-input type="text" v-model="registerForm.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input type="text" v-model="registerForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-switch v-model="registerForm.sex"
                                   :active-value="2" active-text="女" active-color="#F56C6C"
                                   inactive-value="1" inactive-text="男" inactive-color="#67C23A"></el-switch>
                    </el-form-item>
                    <el-form-item label="QQ">
                        <el-input type="text" v-model="registerForm.qq"></el-input>
                    </el-form-item>
                    <el-form-item label="Email">
                        <el-input type="text" v-model="registerForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="简介">
                        <el-input  type="textarea" maxlength="30" v-model="registerForm.intro"></el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="registerDialogVisible = false">取 消</el-button>
                    <el-button type="danger" @click="registerAction()">注 册</el-button>
              </span>
            </el-dialog>


        </div>



    </div>
</template>


<script>

    import https from "../../https";
    import {Message} from "element-ui";

    export default {
        name: 'nav',
        data() {
            return {
                activeIndex: 1,
                keyword:'',
                loginDialogVisible:false,
                loginForm:{
                    username:'root',
                    password:'admin'
                },
                registerForm:{
                    username:'',
                    password:'',
                    nickname:'',
                    phone:'',
                    sex :1,
                    realName :'',
                    qq :'',
                    email :'',
                    intro :'',

                },

                registerDialogVisible: false,



                user: null,
                list: [{
                    index: "1",
                    path: "/",
                    name: "首页"
                },
                    // {
                    //     index: "2",
                    //     path: "/articles",
                    //     name: "文章"
                    // },
                    {
                        index: "3",
                        path: "/tags/-1",
                        name: "标签"
                    },
                    {
                        index: "4",
                        path: "/category/-1",
                        name: "分类"
                    },
                    {
                        index: "5",
                        path: "/timeline",
                        name: "历程"
                    },
                    {
                        index: "6",
                        path: "/about",
                        name: "关于我"
                    }]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClickMenuItem(path) {
                console.log(path)
            },
            // 搜索框 获取值
            onEnterSearch: function(){
                this.$router.push({
                    path: `/search/${this.keyword}`
                })
            },

            // 打开登录弹窗
            openLoginDialog(){
                this.loginDialogVisible = true
            },

            // 登录
            loginAction(){
                if (this.loginForm.username == ''
                || this.loginForm.password == ''){

                    return
                }

                // 登录Api
                https.fetchPost('/admin/login', this.loginForm).then((res) => {

                    const {data} = res

                    if (data.code == 200) {

                        const {accessToken} = data.data

                        // 设置到Vuex
                        this.$store.commit('setAccessToken',accessToken)

                        this.loginDialogVisible = false

                        Message({
                            message: data.message,
                            type: 'success',
                            duration: 5 * 1000
                        })

                        // console.log(accessToken)

                        location.reload()

                    }
                }).catch((err) => {
                    console.log(err);
                })



            },

            // 打开注册弹窗
            openRegisterDialog(){
                this.registerDialogVisible = true
            },
            registerAction(){
                // 登录Api
                https.fetchPost('/user/register', this.registerForm).then((res) => {

                    const {data} = res

                    if (data.code == 200) {



                        Message({
                            message: data.message,
                            type: 'success',
                            duration: 5 * 1000
                        })

                        this.registerDialogVisible = false

                    }
                }).catch((err) => {
                    console.log(err);
                })
            },

            //注销
            logoutAction(){
                if (this.user == null || this.user == undefined) return


                // 登录Api
                https.fetchPost('/admin/logout?token=' + this.$store.state.access_token).then((res) => {

                    const {data} = res

                    if (data.code == 200) {


                        // 重置 token
                        this.$store.commit('resetAccessToken')

                        Message({
                            message: data.message,
                            type: 'success',
                            duration: 5 * 1000
                        })

                        location.reload()

                        // const {accessToken} = data.data
                        //
                        // // 设置到Vuex
                        // this.$store.commit('setAccessToken',accessToken)
                        //
                        // this.loginDialogVisible = false
                        // console.log(accessToken)
                        //
                        // location.reload()

                    }
                }).catch((err) => {
                    console.log(err);
                })

            },

            // 前往后台
            toBackstage(){
                const hostname = document.location.hostname
                const port = 9528
                const domain = hostname + ':' +  port
                const url = 'http://' + domain + '/#/person/personInfo'
                console.log(url)
                window.open(url)
            }

        },
        watch:{
            '$store.state.user':{
                handler:function (newVal) {
                    this.user = newVal
                },
                immediate:true,
                deep:true
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">

    .avatar-container {
        margin-right: 30px;

        .avatar-wrapper {
            margin-top: 5px;
            position: relative;

            .user-avatar {
                cursor: pointer;
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }

            .el-icon-caret-bottom {
                cursor: pointer;
                position: absolute;
                right: -20px;
                top: 25px;
                font-size: 12px;
            }
        }
    }


    .nav-mobile {
        display: flex;
        line-height: 60px;
        .nav-mobile-logo {
            flex: 1;
            margin-top: 5px;
            margin-left: 10px;
        }
        .title {
            flex: 3;
            font-size: 24px;
        }
        .menu {
            flex: 1;
            font-size: 34px;
            color: #409eff;
        }
    }
    .nav-mobile-content {
        font-size: 0.3rem;
        height: 7.3rem;
        width: 100%;
        background-color: #fff;
        .list {
            .item {
                line-height: 0.8rem;
                color: #303133;
                border-bottom: 1px solid #eee;
                a {
                    display: block;
                    width: 100%;
                    color: #409eff;
                    text-decoration-line: none;
                }
            }
        }
    }
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        .nav-content {
            width: 1200px;
            margin: 0 auto;
        }
        .logo {
            height: 50px;
            margin: 0;
            border-radius: 50%;
            margin-top: 5px;
        }
        .el-menu.el-menu--horizontal {
            border-bottom: none;
        }
        .el-menu--horizontal > .el-menu-item {
            cursor: pointer;
            color: #333;
        }
        .nav-right {
            /*position: relative;*/
            padding-top: 12px;
            text-align: right;
            .el-dropdown {
                cursor: pointer;
                padding-right: 60px;
            }
            .user-img {
                position: absolute;
                top: -15px;
                right: 0;
                width: 50px;
                border-radius: 50%;
            }
        }
    }

    .enter-slideUp,
    .leave-slideDown {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1010;
    }

    .enter-slideUp {
        overflow: auto;
        visibility: visible;
        z-index: 1001;
        animation: slideUp 0.3s forwards;
    }
    .leave-slideDown {
        visibility: visible;
        z-index: 1001;
        animation: slideDown 0.3s forwards;
    }
    @keyframes slideUp {
        from {
            transform: translate3d(0, 100%, 0);
            opacity: 0.1;
        }
        to {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    @keyframes slideDown {
        from {
            transform: translate3d(0, 0, 0);
        }
        to {
            transform: translate3d(0, 100%, 0);
            opacity: 0;
        }
    }
    .mask {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0.5;
    }
    .mask-fade-out {
        animation: maskFadeOut 0.4s forwards;
    }
    @keyframes maskFadeOut {
        from {
            opacity: 0.5;
        }
        to {
            opacity: 0;
        }
    }
</style>
